import { defineComponent, PropType, Transition } from 'vue'
import './popup.less'

type Position = 'top' | 'right' | 'bottom' | 'left'

export default defineComponent({
	name: 'popup',
	props: {
		show: Boolean,
		title: String,
		showClose: Boolean,
		position: {
			type: String as PropType<Position>,
			default: 'bottom'
		},
		cancelText: {
			type: String,
			default: '取消'
		}
	},
	setup(props, { emit, slots }) {
		const close = () => {
			emit('update:show', false)
		}

		const contentSlot = () => {
			return <div class="content">{slots?.default?.()}</div>
		}

		const footerSlot = () => {
			const slot = slots['footer']
			if (slot) {
				return <div class="footer">{slot()}</div>
			}
		}

		const headerSlot = () => {
			const slot = slots['header']
			if (slot) {
				return <div class="header">{slot()}</div>
			}
			if (props.title || props.showClose) {
				return (
					<div class="header default">
						<div class="header-text" v-show={props.title}>
							{props.title}
						</div>
						<div
							class="header-close icon iconfont"
							v-show={props.showClose}
							onClick={close}
						>
							&#xe6ae;
						</div>
					</div>
				)
			}
		}

		return () => (
			<div class="popup">
				<Transition name="fade">
					<div v-show={props.show} class="popup-mask" onClick={close}></div>
				</Transition>
				<Transition
					name={`slide-${props.position}`}
					enter-active-class="slide-enter-active"
					leave-active-class="slide-leave-active"
				>
					<div v-show={props.show} class={['popup-content', props.position]}>
						{headerSlot()}
						{contentSlot()}
						{footerSlot()}
					</div>
				</Transition>
			</div>
		)
	}
})
